<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-17 10:25:51
 * @LastEditors: wangwang 2723008256@qq.com
 * @LastEditTime: 2023-11-17 14:10:52
 * @FilePath: \jzjypc4.0\src\views\PersonalCenter\subscriptionDetails.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="container">
    <div class="bread">
      当前位置：
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/personal' }"
          >个人中心</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/personal/Subscription' }"
          >资源订阅</el-breadcrumb-item
        >
        <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="content">
      <div class="left">
        <div class="top">
          <span></span>
          <h3>资源订阅</h3>
        </div>
        <div class="fwDetails">
          <img :src="file_url" alt="" />
          <div class="msg">
            <div class="title">
              <h2>{{ title }}</h2>
              <span class="dingyue" v-if="dy_status == 0" @click="getDy"
                >添加订阅</span
              >
              <span class="nodingyue" v-if="dy_status == 1" @click="cancelDy"
                >取消订阅</span
              >
              <!-- <span class="dingyue" v-if="dy_status == 0" @click="getDy"
                ><i class="el-icon-plus"></i>添加订阅</span
              >
              <span class="dingyue" v-if="dy_status == 1" @click="cancelDy"
                ><i class="el-icon-minus"></i>取消订阅</span
              > -->
            </div>
            <p class="jieshao" v-html="sub_info"></p>
            <div class="update">
              资源已更新<span>{{ yts_nums }}</span
              >份
            </div>
            <el-progress
              :percentage="per"
              :stroke-width="8"
              color="#08A579"
            ></el-progress>
          </div>
        </div>
        <div class="updateTime" v-for="item in updateTimeList" :key="item.id">
          <div class="topTime">
            <h3>
              更新时间：{{ timeStamp2String(item.push_time * 1000, 1) }} ({{
                timeStamp2String(item.push_time * 1000, 11)
              }})
            </h3>
            <span @click="dialogVisible2 = true">
              <i class="el-icon-mobile"></i>
              使用手机端查看
            </span>
          </div>
          <div class="subscription" v-for="list in item.lists" :key="list.id">
            <img
              src="../../assets/img/resFile (1).png"
              alt="file_url"
              v-if="
                list.suffix == 'ppt' ||
                list.suffix == 'pptx' ||
                list.suffix == 'ppsx' ||
                list.suffix == 'pps'
              "
            />
            <img
              src="../../assets/img/resFile (2).png"
              alt="file_url"
              v-if="list.suffix == 'mp4' || list.suffix == 'rm'"
            />
            <img
              src="../../assets/img/resFile (3).png"
              alt="file_url"
              v-if="list.suffix == 'xls' || list.suffix == 'xlsx'"
            />
            <img
              src="../../assets/img/resFile (4).png"
              alt="file_url"
              v-if="list.suffix == 'zip' || list.suffix == 'rar'"
            />
            <img
              src="../../assets/img/resFile (5).png"
              alt="file_url"
              v-if="list.suffix == 'm4a' || list.suffix == 'mp3'"
            />
            <img
              src="../../assets/img/resFile (6).png"
              alt="file_url"
              v-if="list.suffix == 'doc' || list.suffix == 'docx'"
            />
            <img
              src="../../assets/img/resFile (7).png"
              alt="file_url"
              v-if="list.suffix == 'pdf'"
            />
            <img
              src="../../assets/img/resFile (8).png"
              alt="file_url"
              v-if="list.suffix == 'png' || list.suffix == 'jpg'"
            />
            <div class="vip" v-if="list.is_sf == 1">
              <img src="../../assets/img/ffzyb/vip.png" alt="">
            </div>
            <p :class="{ ylp: nowKjid == list.id }">{{ list.title }}</p>
            <span @click="yulan(list.id)">预览</span>
            <span @click="download(list.id)" v-if="dlList.indexOf(list.id) < 0"
              >下载</span
            >
            <span v-if="dlList.indexOf(list.id) >= 0" style="color: #999"
              >已下载</span
            >
          </div>
        </div>
        <!-- 未订阅展示内容 -->
        <div class="wdykt" v-if="dy_status == 0">
          <!-- <div class="pic">
            <img src="../../assets/img/zydykt.png" alt="" />
          </div> -->
          <p>优质资源都在这里，快来立即订阅吧！</p>
          <div class="dynow" @click="getDy">立即订阅</div>
        </div>
        <!-- 已订阅无推送展示内容 -->
        <div class="gzgzh" v-if="updateTimeList.length < 1 && dy_status == 1">
          <p>再等等哦！您的订阅还未开始推送！</p>
          <p>先关注一下公众号吧！更新时我们会及时给您通知！</p>
          <div class="pic"><img :src="gzhFile" alt="" /></div>
          <p class="heihei"><span>如已关注，无需重复关注~</span></p>
        </div>
      </div>
      <div class="right">
        <!-- <h4>在线预览：</h4>
        <div class="pic" v-if="!nothing">
          <img
            :src="rightImg"
            style="width: 480px; height: auto"
            @click="yulanBig"
          />
          <div class="changePage">
            <span @click="prePage">上一页 </span>
            {{ nowPage + 1 }}/{{ allPage }}
            <span @click="nextPage"> 下一页</span>
          </div>
        </div>
        <div class="nothing" v-if="nothing">
          <img src="../../assets/img/nothing.png" alt="" />
        </div> -->
        <!-- 资源订阅 -->
        <div class="ziyuandingyue">
          <div class="dingyuetitle">
            <div class="boxtitle">
              <img src="../../assets/img/4.2/4.2dingyue.png" alt="" />
              <h4>推荐订阅</h4>
            </div>
            <span class="seemore" @click="gosubscription"> 查看更多 </span>
          </div>
          <div class="dingyueLists">
            <div
              class="dingyuebox"
              v-for="item in zydyList"
              :key="item.id"
              @click="goSubDeta(item.id)"
            >
              <p>{{ item.title }}</p>
              <div class="dingyue dy" v-if="item.dy_status == 0">
                <i class="el-icon-plus"></i>订阅
              </div>
              <div class="yidingyue dy" v-if="item.dy_status == 1">已订阅</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 弹窗大图展示 -->
      <el-dialog :visible.sync="dialogVisible" width="960px">
        <div class="picList" v-if="rightPicList.length > 0">
          <div class="pic" v-for="item in rightPicList" :key="item.id">
            <img :src="item.file_url" alt="" />
          </div>
        </div>
      </el-dialog>
    </div>
    <!-- 订阅关注 -->
    <el-dialog
      :visible.sync="dialogVisible1"
      width="400px"
      :before-close="handleClose1"
      custom-class="guanzhu"
      @close="closeDialog"
    >
      <div class="dysuccess">
        <img src="../../assets/img/dysuccess.png" alt="" />
      </div>
      <p>您已成功订阅！</p>
      <!-- <p>{{ showTitle }}</p> -->
      <h2>请您关注<a>【语文教研小助手】</a>获取 最新消息通知</h2>
      <div class="gzevm">
        <img :src="gzhFile" alt="" />
      </div>
      <span>如已关注，无需重复关注~</span>
    </el-dialog>
    <!-- 移动端查看 -->
    <el-dialog
      :visible.sync="dialogVisible2"
      width="440px"
      :before-close="handleClose2"
      custom-class="phone"
    >
      <h2>资源包推送服务</h2>
      <div class="packgeName">
        <img src="../../assets/img/ziyuan.png" alt="" />
        <p>{{ title }}</p>
      </div>
      <div class="packgeCtt" v-if="updateTimeList[0]">
        <p>内含：</p>
        <ul>
          <li
            v-for="item in updateTimeList[0].lists.slice(0, 4)"
            :key="item.id"
          >
            {{ item.title }}
          </li>
        </ul>
        <p>...</p>
      </div>
      <div class="bottom">
        <img :src="ewm_file_url" alt="" />
        <div class="saomiao">
          <p>手机扫描二维码</p>
          <p>移动端获取全部资源</p>
        </div>
      </div>
    </el-dialog>
    <!-- 下载付费服务包弹窗 -->
    <div class="fwb">
      <fwbtj
        v-if="fwbtjShow"
        :choseGoodId="choseGoodId"
        :goods_lists="goods_lists"
        :caclose="true"
        @zixun ="zixun"
        @choseGood ="choseGood"
        @goyuyue="goyuyue"
        @closefwbtj ="closefwbtj"
      ></fwbtj>
    </div>
    <!-- 问题咨询加客服弹窗 -->
    <wtzxTc
      v-if="zixunShow"
      :zykf_file_url="zykf1_file_url"
      @wtzxClose="wtzxClose"
    ></wtzxTc>
  </div>
</template>

<script>
import fwbtj from "../../components/fwbtj/fubtj.vue";
import wtzxTc from "../../components/wtzxTc/wtzxtc.vue";
import { timeStamp2String } from "../../utils/time";
import {
  info_kejiandingyue,
  list_kejiandingyuetime,
  info_kejian,
  url_kejian,
  dyts,
  kemulists,
  nowkemu,
  list_kejiandingyue_tj
} from "../../api/http";
export default {
  inject: ["reload"], //刷新页面
  props: ["xitongMsg", "kefuMsg"],
  components:{
      fwbtj,
      wtzxTc
    },
  data() {
    return {
      kemu_id: "", //科目id
      dyid: "", //课件订阅id
      file_url: "", //课件图
      title: "", //课件标题
      dy_status: 0, //是否订阅 1订阅 0未订阅
      sub_info: "", //简介
      per: 1, //推送进度
      yts_nums: 0, //资源更新份数
      dialogVisible1: false,
      dialogVisible2: false,
      updateTimeList: [], //课件订阅时间列表
      rightPicList: [], //右侧展示图组
      rightImg: "", //右侧展示图
      nowPage: 0, //当前页
      allPage: "", //总页数
      nowKjid: "", //当前正在预览的课件id
      dialogVisible: false, //预览弹窗
      timeStamp2String,
      nothing: true, //是否有可预览的文件
      dlList: [], //当前页面下载过的列表
      ewm_file_url: "", //移动端扫面二维码
      gzhFile: "", //公众号二维码

      zydyList: [], //资源订阅列表

      fwbtjShow:false,//服务包推荐弹窗 付费的未购买时弹出
      zixunShow:false,//咨询客服1二维码弹窗
      zykf1_file_url:'',//资源客服1二维码
      choseGoodId:'',//服务包推荐弹窗选中的商品id
      goods_lists: [], //商品列表
    };
  },
  created() {
    this.dyid = this.$route.query.id;
    //获取课件订阅详情
    info_kejiandingyue({
      md5key: localStorage.getItem("md5key"),
      id: this.dyid,
    }).then((res) => {
      if (res.retInt == 1) {
        // console.log(res, "资源订阅详情");
        const data = res.retRes;
        this.file_url = data.file_url;
        this.title = data.title;
        this.dy_status = data.dy_status;
        this.sub_info = data.sub_info;
        this.yts_nums = data.yts_nums;
        this.per = data.per;
        this.ewm_file_url = data.ewm_file_url;
      }
    });
    //获取课件订阅时间列表
    list_kejiandingyuetime({
      md5key: localStorage.getItem("md5key"),
      kejiandingyue_id: this.dyid,
    }).then((res) => {
      if (res.retInt == 1) {
        // console.log(res, "资源订阅时间列表");
        this.updateTimeList = res.retRes;
        if (res.retRes.length == 0) {
          this.nothing = true;
        } else {
          this.nothing = false;
          this.nowKjid = res.retRes[0].lists[0].id;
          //进入页面获取第一个课件的第一张预览图
          info_kejian({
            md5key: localStorage.getItem("md5key"),
            id: this.nowKjid,
          }).then((res) => {
            // console.log(res, "课件详情");
            this.rightPicList = res.retRes.file_lists;
            this.allPage = this.rightPicList.length;
            this.rightImg = this.rightPicList[this.nowPage].file_url;
            // console.log(this.rightPicList);
          });
        }
      }
    });
    nowkemu({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      this.kemu_id = res.retRes.kemu_id;
      //获取科目列表中的公众号二维码
      kemulists({
        md5key: localStorage.getItem("md5key"),
      }).then((res) => {
        // console.log(res, "科目列表");
        if (this.kemu_id == 1) {
          this.gzhFile = res.retRes[0].gzh_file_url;
        } else if (this.kemu_id == 3) {
          this.gzhFile = res.retRes[1].gzh_file_url;
        }
        // console.log(this.gzhFile);
      });
    });
    this.list_kejiandingyue_tj();
  },
  mounted(){
    window.addEventListener("scroll", this.handleScrollY, true);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScrollY, true);
  },
  methods: {
    //关闭服务包推荐弹窗
    closefwbtj(){
      this.fwbtjShow = false
    },
    //点击商品咨询按钮
    zixun(){
      this.fwbtjShow = false
      this.zykf1_file_url = this.kefuMsg.zykf_file_url;
      console.log(this.zykf1_file_url)
      this.zixunShow = true
    },
    //关闭问题咨询添加客服1二维码弹窗
    wtzxClose(){
      console.log(123)
      this.zixunShow = false
      this.fwbtjShow = true
    },
    //去预约
    goyuyue(id){
      console.log(id,this.kemu_id)
      this.$router.push({
          name: "Dingzhi",
          query: {
            id: id,
            kemu_id:this.kemu_id,
            type:'dy',
            gopay:1,
          },
        });
    },
    //选择商品
    choseGood(id){
      this.choseGoodId = id
    },
    //滚动监听
    handleScrollY(){
      const left = document.querySelector('.left')
      const right = document.querySelector('.right')
      if(left.getBoundingClientRect().top<80){
        right.style.position = 'absolute'
        right.style.top = - left.getBoundingClientRect().top +80 +'px'
        right.style.right = '100px'
      }else{
        right.style.position = 'static'
      }

    },
    //获取右侧资源订阅列表
    list_kejiandingyue_tj() {
      list_kejiandingyue_tj({
        md5key: localStorage.getItem("md5key"),
        kemu_id: this.kemu_id,
        nianji_ids: this.dingzhiNj_id,
      }).then((res) => {
        // console.log(res, "资源订阅列表");
        if (res.retRes.length > 8) {
          this.zydyList = res.retRes.slcie(0, 8);
        } else {
          this.zydyList = res.retRes;
        }
      });
    },
    //前往资源订阅
    gosubscription() {
      this.$router.push({
        name: "Subscription",
      });
    },
     //前往资源订阅详情页
    goSubDeta(id) {
      this.$router.push({
        name: "SubscriptionDetails",
        query: {
          id: id,
        },
      });
      this.reload()
    },
    //关闭订阅成功框
    handleClose1(done) {
      this.dialogVisible1 = false;
    },
    //关闭移动端查看弹窗
    handleClose2(done) {
      this.dialogVisible2 = false;
    },
    //添加订阅
    getDy() {
      this.dialogVisible1 = true;
      dyts({
        md5key: localStorage.getItem("md5key"),
        kejiandingyue_id: this.dyid,
        status: 1,
      }).then((res) => {
        // console.log(res, "订阅");
      });
    },
    //取消订阅
    cancelDy() {
      dyts({
        md5key: localStorage.getItem("md5key"),
        kejiandingyue_id: this.dyid,
        status: 2,
      }).then((res) => {
        this.$notify({
          message: "已取消订阅",
          duration: 2000,
          showClose: false,
        });
        this.reload(); //刷新页面
      });
    },
    //关闭订阅成功弹窗
    closeDialog(e) {
      this.reload(); //刷新页面
    },
    //点击预览
    yulan(id) {
      //获取对应id的课件详情
      this.nowKjid = id;
      this.nowPage = 0;
      info_kejian({
        md5key: localStorage.getItem("md5key"),
        id: id,
      }).then((res) => {
        // console.log(res, "课件详情");
        this.rightPicList = res.retRes.file_lists;
        this.allPage = this.rightPicList.length;
        this.rightImg = this.rightPicList[this.nowPage].file_url;
        // console.log(this.rightPicList);
        this.dialogVisible = true;
      });
    },
    //点击下载
    download(id) {
      info_kejian({
        md5key: localStorage.getItem("md5key"),
        id: id,
      }).then((res) => {
        // console.log(res, "课件详情");
        const data = res.retRes;
        const is_sf = data.is_sf;
        const gm_status = data.gm_status;
        const is_pay = data.is_pay;
        this.goods_lists = data.goods_lists;
        if(is_sf == 0){
          // this.fwbtjShow = true
          //获取对应id下载链接
          url_kejian({
            md5key: localStorage.getItem("md5key"),
            id: id,
          }).then((res) => {
            const data = res.retRes;
            let url = data.download_file_url;
            const a = document.createElement("a");
            a.href = url;
            a.download = data.title;
            a.style.display = "none";
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            this.dlList.push(id);
          });
        }else if(is_sf == 1 && (gm_status == 0 || is_pay !=1)){
          this.fwbtjShow = true
        }else if(is_sf == 1 && gm_status == 1 && is_pay == 1){
          //获取对应id下载链接
          url_kejian({
            md5key: localStorage.getItem("md5key"),
            id: id,
          }).then((res) => {
            const data = res.retRes;
            let url = data.download_file_url;
            const a = document.createElement("a");
            a.href = url;
            a.download = data.title;
            a.style.display = "none";
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            this.dlList.push(id);
          });
        }
      });
    },
    //点击上一页
    prePage() {
      if (this.nowPage >= 1) {
        this.nowPage = this.nowPage - 1;
        this.rightImg = this.rightPicList[this.nowPage].file_url;
      } else {
        this.nowPage = 0;
      }
    },
    //点击下一页
    nextPage() {
      if (this.nowPage + 1 < this.rightPicList.length) {
        this.nowPage = this.nowPage + 1;
        this.rightImg = this.rightPicList[this.nowPage].file_url;
      } else if (this.nowPage >= this.rightPicList.length - 1) {
        this.nowPage = this.rightPicList.length - 1;
      }
    },
    //预览大图
    yulanBig() {
      // this.dialogVisible = true;
    },
  },
};
</script>
<style>
/* 面包屑 */
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link:hover {
  color: #08a579;
}
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  font-weight: normal;
  color: #626366;
}
.el-breadcrumb__separator {
  color: #626366;
}
.el-dialog__headerbtn {
  /* color: #08a579; */
  width: 0;
  height: 0;
}
.el-dialog__headerbtn .el-dialog__close {
  position: absolute;
  top: 0;
  right: 0;
}
.el-dialog__headerbtn .el-dialog__close:hover {
  color: #08a579;
  position: absolute;
  top: 0;
  right: 0;
}
</style>
<style lang="less" scoped>
#container {
  background-color: #f0f0f5;
  .bread {
    display: flex;
    margin-top: 3px;
    padding: 20px 0;
    width: 1200px;
    margin: 0 auto;
    /deep/.el-breadcrumb__item:last-child > .el-breadcrumb__inner {
      color: #08a579;
    }
  }
  .content {
    position: relative;
    display: flex;
    width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    .top {
      display: flex;
      margin: 30px 0px 40px 30px;
      span {
        display: inline-block;
        position: relative;
        top: 5px;
        margin-right: 10px;
        width: 3px;
        height: 20px;
        background: #08a579;
        border-radius: 2px;
      }
      h3 {
        font-size: 20px;
      }
    }
    .left {
      width: 720px;
      .fwDetails {
        display: flex;
        // align-items: center;
        margin-left: 30px;
        padding-bottom: 30px;
        margin-bottom: 30px;
        border-bottom: 1px solid #e6e6e6;
        img {
          width: 100px;
          height: 80px;
          background: #7dbbfa;
          border-radius: 8px;
        }
        .msg {
          margin-left: 20px;
          .title {
            display: flex;
            margin-bottom: 10px;
            // margin-top: 8px;
            h2 {
              margin-right: 10px;
              width: 350px;
              font-size: 14px;
            }
            .nodingyue {
              position: relative;
              top: 3px;
              margin-right: 10px;
              text-align: center;
              line-height: 20px;
              width: 80px;
              height: 20px;
              color: #646566;
              border: 1px solid #c4c7cc;
              border-radius: 10px;
              cursor: pointer;
            }
            .dingyue {
              display: inline-block;
              text-align: center;
              width: 96px;
              height: 28px;
              background: #08a579;
              border-radius: 14px;
              color: #ffffff;
              line-height: 28px;
              font-size: 14px;
              cursor: pointer;
            }
          }
          .jieshao {
            margin-bottom: 8px;
            width: 504px;
            font-size: 14px;
            color: #626366;
            overflow: hidden; //超出隐藏
            text-overflow: ellipsis; //溢出用省略号显示
            display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
            // 控制行数
            -webkit-line-clamp: 2; //超出两行隐藏
          }
          .update {
            margin-bottom: 20px;
            color: #939599;
            font-size: 12px;
            span {
              color: #f6444e;
            }
          }
          /deep/.el-progress-bar__outer {
            width: 470px !important;
          }
          /deep/.el-progress__text {
            font-size: 12px !important;
            margin-left: 22px;
            color: #999;
          }
        }
      }
      .updateTime {
        margin-left: 30px;
        .topTime {
          display: flex;
          h3 {
            margin-right: 20px;
            font-size: 16px;
            color: #333;
            font-family: Microsoft YaHei;
          }
          span {
            position: relative;
            top: -3px;
            text-align: center;
            line-height: 28px;
            width: 128px;
            height: 28px;
            border: 1px solid #08a579;
            border-radius: 14px;
            font-size: 12px;
            color: #08a579;
            cursor: pointer;
          }
        }
        .subscription {
          position: relative;
          display: flex;
          margin: 20px 0 25px 0;
          padding-bottom: 20px;
          border-bottom: 1px dashed #e6e6e6;
          .vip{
            img{
              position: absolute;
              left: 20px;
              bottom: 20px;
              width: 25px;
              height: 13px;
            }
          }
          img {
            width: 44px;
            height: 50px;
          }
          p {
            margin-left: 20px;
            margin-right: 60px;
            line-height: 50px;
            width: 450px;
            font-size: 14px;
            color: #626366;
            white-space: nowrap;
            overflow: hidden; //超出隐藏
            text-overflow: ellipsis;
          }
          .ylp {
            color: #08a579;
          }
          span {
            padding-right: 10px;
            line-height: 50px;
            font-size: 14px;
            color: #188cfc;
            cursor: pointer;
          }
        }
      }
      .wdykt {
        .pic {
          margin: 0 auto;
          margin-top: 100px;
          text-align: center;
          width: 206px;
          img {
            width: 206px;
          }
        }
        p {
          margin-top: 15px;
          text-align: center;
          font-size: 14px;
          color: #999;
        }
        .dynow {
          margin: 0 auto;
          margin-top: 20px;
          margin-bottom: 250px;
          width: 120px;
          height: 40px;
          background: #08a579;
          border-radius: 4px;
          text-align: center;
          line-height: 40px;
          color: #fff;
          font-size: 14px;
          cursor: pointer;
        }
      }
      .gzgzh {
        margin-top: 100px;
        p {
          text-align: center;
          font-size: 14px;
          color: #333;
          span {
            color: #999;
          }
        }
        .pic {
          margin: 0 auto;
          margin-top: 30px;
          width: 160px;
          img {
            width: 160px;
          }
        }
        .heihei {
          margin-bottom: 260px;
        }
      }
    }
    .right {
      position: static;
      top: 90px;
      height: 1000px;
      // right: 100px;
      .ziyuandingyue {
          width: 380px;
          background: #ffffff;
          border-radius: 10px;
          overflow: hidden;
          cursor: pointer;
          .dingyuetitle {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 30px;
            margin-bottom: 17px;
            .boxtitle {
              display: flex;
              align-items: center;
              margin-left: 20px;
              img {
                margin-right: 4px;
                width: 24px;
                height: 24px;
              }
              h4 {
                font-size: 18px;
                color: #333;
              }
            }
            .seemore {
              margin-right: 17px;
              font-size: 12px;
              color: #666;
              cursor: pointer;
            }
            .seemore:hover {
              color: #08a579;
            }
          }
          .dingyueLists {
            .dingyuebox {
              display: flex;
              align-items: center;
              margin-bottom: 20px;
              margin-left: 20px;
              width: 380px;
              height: 66px;
              background: #f5f7fa;
              border-radius: 4px;
              p {
                width: 245px;
                margin-left: 14px;
                font-size: 14px;
                color: #333;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2; // 控制多行的行数
                -webkit-box-orient: vertical;
              }
              .dy {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-left: 26px;
                width: 60px;
                height: 32px;
                background: #08a579;
                border-radius: 16px;
                color: #fff;
                font-size: 12px;
                cursor: pointer;
                i {
                  position: relative;
                  top: 1px;
                  left: -2px;
                }
              }
              .yidingyue {
                background-color: #cccccc;
              }
            }
          }
        } 
      // flex: 1;
      // margin-top: 96px;
      // h4 {
      //   margin-bottom: 30px;
      // }
      // .changePage {
      //   margin-top: 20px;
      //   margin-bottom: 30px;
      //   text-align: center;
      //   user-select: none;
      //   span {
      //     cursor: pointer;
      //   }
      // }
      // .nothing {
      //   text-align: center;
      //   img {
      //     width: 200px;
      //   }
      // }
    }
  }
  /deep/.el-dialog {
    border-radius: 20px;
    overflow: hidden;
  }
  /deep/.el-dialog__header {
    padding: 0;
  }
  /deep/.el-dialog__body {
    padding: 0;
    padding-bottom: 40px;
  }
  /deep/.el-dialog__close {
    position: relative !important;
    right: 10px !important;
  }
  /deep/.el-dialog {
    margin-top: 10vh !important;
    // padding: 20px;
    // border-radius: 14px;
    // width: 880px !important;
  }
  /deep/.el-dialog__header {
    // padding-top: 40px;
  }
  /deep/.el-dialog__body {
    // padding: 0;
    .picList {
      height: 82vh;
      overflow-y: scroll;
      .pic {
        img {
          width: 810px;
        }
      }
    }
    ::-webkit-scrollbar {
      width: 7px;
    }
    ::-webkit-scrollbar-track {
      background-color: #f5f5f5;
      -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
      border-radius: 5px;
    }
    ::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.2);
      border-radius: 5px;
    }
    ::-webkit-scrollbar-button {
      background-color: #eee;
      display: none;
    }
    ::-webkit-scrollbar-corner {
      background-color: black;
    }
  }
  .guanzhu {
    background: linear-gradient(180deg, #ffffff, #d2f9ee);
    .dysuccess {
      text-align: center;
      width: 400px;

      background: linear-gradient(0deg, #ffffff, #d2f9ee);
      img {
        margin-top: 30px;
        width: 48px;
        height: 48px;
      }
    }
    h2 {
      margin: 0 auto;
      margin-top: 10px;
      width: 270px;
      text-align: center;
      font-size: 18px;
      color: #333333;
      line-height: 30px;
      a {
        color: #f6444e;
      }
    }
    p {
      // margin-bottom: 30px;
      margin: 0 auto;
      width: 400px;
      text-align: center;
      font-size: 16px;
      color: #333;
      line-height: 28px;
    }
    .gzevm {
      margin-top: 5px;
      width: 400px;
      text-align: center;
      img {
        width: 200px;
        height: 200px;
      }
    }
    span {
      display: block;
      line-height: 25px;
      text-align: center;
      color: #999999;
    }
  }
  .phone {
    h2 {
      margin: 30px 0;
      text-align: center;
      color: #333333;
      font-size: 20px;
    }
    .packgeName {
      display: flex;
      margin-right: 30px;
      color: #333333;
      font-weight: 600;
      img {
        margin: 0 20px 0 30px;
        width: 46px;
        height: 46px;
      }
      p {
        overflow: hidden; //超出隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
        // 控制行数
        -webkit-line-clamp: 2; //超出两行隐藏
      }
    }
    .packgeCtt {
      margin-left: 30px;
      margin-top: 30px;
      margin: 30px 20px 0 30px;
      font-size: 14px;
      border-bottom: 1px solid #dee0e3;
      p {
        margin-bottom: 10px;
        color: #646566;
      }
      ul {
        // height: 60px;
        overflow: hidden;
        li {
          margin-bottom: 10px;
        }
      }
    }
    .bottom {
      display: flex;
      margin-left: 30px;
      margin-top: 30px;
      img {
        margin-right: 30px;
        width: 160px;
        height: 160px;
      }
      .saomiao {
        margin-top: 55px;
        p {
          text-align: center;
          line-height: 40px;
          font-size: 16px;
          color: #333333;
          font-weight: 600;
        }
      }
    }
  }
  .fwb{
    /deep/.el-dialog__headerbtn {
      right: 20 !important;
    }
  }
}
</style>